<template>
  <el-menu
    :default-active="activeMenu"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    background-color="#333F58"
    text-color="#ffffff"
    active-text-color="#ffffff"
    router
    class="sidebar"
  >
   <el-menu-item
      v-for="item in menuItems"
      :key="item.path"
      :index="item.path"
    >
      <template #title>{{ item.title }}</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref , computed} from 'vue';
import { useRoute } from 'vue-router';

const menuItems = ref([
  { path: '/', title: '首页' },
  { path: '/detail', title: '详情' }
]);

const route = useRoute();

const activeMenu = computed(() => {
  if (route.path === '/' || route.path === '') {
    return '/';
  }
  return route.path;
});

const isCollapse = ref(false);

const handleOpen = (key, keyPath) => {
  console.log('Menu Open:', key, keyPath);
};

const handleClose = (key, keyPath) => {
  console.log('Menu Close:', key, keyPath);
};
</script>

<style scoped>
  .sidebar{
    width: 160px;
  }
  .is-active{
    background: #409eff;
  }
</style>